<?php include("includes/session.php"); ?>
<?php include("includes/connect_db.php"); ?>
<?php include("includes/header.php"); ?>
<?php include("notif.php"); ?>

<style>
	div{
		font-family: 'SEGOE UI';
	}
	.border{
		border: 1px solid #08c;
	}
	#pilihKontak{
		width: 200px;
	}
	.btnPilihKontak{
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 3px solid #08c;
	}
	.kontakTampil{
		padding: 5px;
		background: #08c;
		border-radius: 3px;
		margin-bottom: 5px;
		min-height: 30px;
		color: #FFF;
		width: 300px;
	}
	.span8{
		border: 1px solid #000;
	}
	.hapus{
		cursor: pointer;
	}
</style>

<div class="span9">  
    <h3>SMS</h3>                      
    <ul class="breadcrumb well">
    	<li><a href="kontak.php">Contact</a> <span class="divider">/</span></li>
        <li class="active">Tambah</li>                
    </ul>    
    <div class="alert alert-info">
		Tambah Kontak
    </div>
    
	<div>
		<div class="span12">
			<div class="span6">
				<form class="form-horizontal">
					<div class="control-group">
						<label class="control-label">Nama Group</label>
						<div class="controls">
							<input placeholder="Masukkan Nama" id='namaKontak' type="text" value="">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label">Deskripsi</label>
						<div class="controls">
							<textarea placeholder="Masukkan Deskripsi" id='deskripsiKontak' value="" style="height: 50px; overflow: hidden; word-wrap: break-word; resize: none;"><?php echo $_POST['Deskripsi'] ?></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="span6">
				<div class="span12 btnPilihKontak">
					<button class="btn btn-info" id="pilihKontak">
						<i class="icon-white icon-user"></i>
						Pilih Kontak
					</button>
				</div>
				<div id="isianKontak" class="span12">
				</div>
			</div>
		</div>
		<div>
			<div class="span12">
				<ul class="breadcrumb well">
					<button style="width: 100px;" class="btn btn-info" id="simpan">Simpan</button>
					<button style="width: 100px;" class="btn btn-danger" id="batal">Batal</button>
				</ul>
			</div>
		</div>
	</div>
</div>

<?php
	
?>

<?php include("includes/footer.php"); ?>

<script type="text/javascript">
    var id = [];

	$(document).ready(function() {
		$('#pilihKontak').click(function(){
			tempView = $(this);
	        $("#tampil-modal").fadeOut("medium",function(){
	        	if($('#tampil-modal').html()==""){
		            $.ajax({
		                url: "kontakGrup-modal.php", 
		                cache: false, 
		                success: function(kontak){ 
		                    $("#tampil-modal").html(kontak);
		                    $("#tampil-modal").fadeIn("medium");
		                    cekKontak();
		                    $('#form-modal').on('hidden', function(){
		                    	$.ajax({
		                    	  url: 'act_contact_group.php?act=1',
		                    	  type: 'POST',
		                    	  data: {id: id},
		                    	  complete: function(xhr, textStatus) {
		                    	    //called when complete
		                    	  },
		                    	  success: function(data, textStatus, xhr) {
		                    	    $('#isianKontak').html(data);
		                    	  },
		                    	  error: function(xhr, textStatus, errorThrown) {
		                    	    //called when there is an error
		                    	  }
		                    	});
		                    });
		                } 
		            }); 
	        	}else{
	        		$('#form-modal').modal('show');
		            cekKontak();
	        	}
	        });
	        return false;
		});
		
		$('.hapus').live("click", function(){
			var idHapus = $(this).closest("div").data("id").toString();
			var indexHapus = id.indexOf(idHapus);
			id.splice(indexHapus, 1);
			$(this).closest("div").remove();
		});

		$('.hapus').live({
			mouseenter:
			   function()
			   {
					$(this).closest('div').css('background-color', '#06c');
			   },
			mouseleave:
			   function()
			   {
					$(this).closest('div').css('background-color', '#08c');		
			   }
		   }
		);

		$('#simpan').click(function(){
			if (($('#namaKontak').val() == "") || ($('#deskripsiKontak').val() == "")) {
				console.log("belum isi");
			} else {
				var kontakGrup = {
					nama : $('#namaKontak').val(),
					deskripsi : $('#deskripsiKontak').val(),
					id: id
				};

				$.ajax({
				  url: 'act_contact_group.php?act=2',
				  type: 'POST',
				  data: kontakGrup,
				  success: function(data, textStatus, xhr) {
				  	console.log(data);
				  	if (data == 'valid'){
				  		alert('grup udah ada cuk');
				  	} else{
					    alert('data berhasil ditambahkan');
					    window.location = ('kontak.php');
				  	};
				  }
				});
				
			};
		});
	});

	$('#batal').click(function(){
		window.location = ('kontak.php');
	});
</script>